<template>
	<div>
		<a-modal
			v-model:open="recordModal.visible"
			title="采购单据"
			:class="recordModal.fullScreen ? 'fullscreen-modal' : ''"
			:style="recordModal.modalStyle"
			:mask-closable="false"
			:destroy-on-close="true"
			:draggable="true"
			@close="recordModal.closeModal(1)"
			@cancel="recordModal.closeModal">
			<!-- 全屏/退出全屏按钮 -->
			<div class="fullscreen-icon-wrapper">
				<span class="modal-header-margin-right">
						<a-checkbox
							v-model:checked="recordModal.isNext"
							class="modal-header-icon-color">批量创建</a-checkbox>
				</span>
				<FullscreenOutlined class="modal-header-icon-color" v-if="!recordModal.fullScreen" @click="recordModal.toggleFullScreen" />
				<FullscreenExitOutlined v-else @click="recordModal.toggleFullScreen" class="modal-header-icon-color"/>
			</div>

			<!--	表单头部		-->
			<BillHeader ref="formRef" :submit-form-data="submitFormData" typeName="采购订单" type="order" />
			<!--表单详情-->
			<BillDetail ref="recordForm" :submit-form-data="submitFormData" typeName="采购订单" type="order" />

			<!-- 自定义footer放在右下角 -->
			<template #footer>
				<div class="bottom-title-info">
					<a-divider class="divider-footer"/>
					<a-button @click="recordModal.closeModal" style="margin-right: 8px;">取消</a-button>
					<a-button type="primary" @click="submit">确定</a-button>
					<span class="modal-title">提示：采购订单是企业向供应商正式下达的购买商品或服务的具体指令，包含数量、价格和交货日期等信息。</span>
				</div>
			</template>
		</a-modal>

	</div>
</template>

<script setup>
import {ref} from 'vue';
import {message} from "ant-design-vue";
import imsOrderApi from "@/api/ims/imsOrderApi";
import BillDetail from "@/components/Ims/Bill/Purchase/BillDetail.vue";
import BillHeader from "@/components/Ims/Bill/Purchase/BillHeader.vue";





// 表单数据
const submitFormData = ref(
	{
		header: {
			userIds: [{}],
			invoiceType: '不开票'
		},
		recordList: []
	}
)
const totalMoney = ref({
	totalCount: '',
	totalPrice: '',
	totalTaxAmount: ''
})

// 表单组件
const recordForm = ref(null);
const formRef = ref(null)
// 定义emit事件
const emit = defineEmits({ successful: null })


// 弹出层
const recordModal = ref({
	modalStyle: {
		width: '1200px',
		height: '1200px',
	},
	visible: false,
	fullScreen: false,
	isNext: false,

	headerRules: {
		billOrderNo: [{ required: true, message: '单据编号不能为空', trigger: ['blur', 'input'] }],
		billDate: [{ required: true, message: '单据日期不能为空', trigger: ['blur', 'change'] }],
		warehousingIds: [{ required: true, message: '入库仓库为必选项', trigger: ['blur', 'input'] }],
		invoiceType: [{ required: true, message: '发票类型为必选项', trigger: ['blur', 'input'] }],
		supplierIds: [{ required: true, message: '供应商为必选项', trigger: ['blur', 'input'] }]
	},

	openModal: () => {
		recordModal.value.visible = true
	},
	closeModal: (num) => {
		recordModal.value.visible = false;
		recordModal.value.resetData()

	},
	resetData: ()=>{
		submitFormData.value = {header: {}, recordList: []}
		submitFormData.value.header = {
			userIds: [{}],
			invoiceType: '不开票'
		}



		totalMoney.value = {
			totalCount: '',
			totalPrice: '',
			totalTaxAmount: ''
		}
		console.log('数据清空：', submitFormData.value)
	},
	toggleFullScreen: () => {
		recordModal.value.fullScreen = !recordModal.value.fullScreen;
		if (recordModal.value.fullScreen) {
			// 设置全屏样式
			recordModal.value.modalStyle = {
				width: '100vw',
				height: '100vh',
				top: '0',
				left: '0',
				margin: '0',
				padding: '0',
				'max-width': '100vw',
				'overflow': 'hidden'
			};
		} else {
			// 恢复默认样式
			recordModal.value.modalStyle = {
				width: '1200px',
				height: '600px',
			};
		}
		console.log('全屏状态:', recordModal.value.fullScreen, recordModal.value.modalStyle);
	},
});
const onOpen = () => {
	recordModal.value.openModal()
}


// 动态表字段
const columns = [
	{
		title: () => {
			return h('span', [
				h('span', { style: { color: 'red', marginRight: '4px' } }, '*'),
				'商品全名'
			]);
		},
		dataIndex: 'productId',
		key: 'productId',
		width: 200,
		fixed: 'left',
	},
	{
		title: () => {
			return h('span', [
				h('span', { style: { color: 'red', marginRight: '4px' } }, '*'),
				'商品规格'
			]);
		},
		dataIndex: 'productSpecifications',
		key: 'productSpecifications',
		width: 120,
	},
	{
		title: () => {
			return h('span', [
				h('span', { style: { color: 'red', marginRight: '4px' } }, '*'),
				'单位'
			]);
		},
		dataIndex: 'measureUnit',
		key: 'measureUnit',
		width: 120
	},
	{
		title: () => {
			return h('span', [
				h('span', { style: { color: 'red', marginRight: '4px' } }, '*'),
				'入库数量'
			]);
		},
		dataIndex: 'planQuantity',
		key: 'planQuantity',
		width: 120
	},
	{
		title: () => {
			return h('span', [
				h('span', { style: { color: 'red', marginRight: '4px' } }, '*'),
				'税率'
			]);
		},
		dataIndex: 'texRate',
		key: 'texRate',
		width: 120
	},
	{
		title: () => {
			return h('span', [
				h('span', { style: { color: 'red', marginRight: '4px' } }, '*'),
				'含税单价'
			]);
		},
		dataIndex: 'univalence',
		key: 'univalence',
		width: 120
	},
	{

		title: () => {
			return h('span', [
				h('span', { style: { color: 'red', marginRight: '4px' } }, '*'),
				'打折%'
			]);
		},
		dataIndex: 'discount',
		key: 'discount',
		width: 120
	},
	{
		title: () => {
			return h('span', [
				h('span', { style: { color: 'red', marginRight: '4px' } }, '*'),
				'含税金额'
			]);
		},
		dataIndex: 'money',
		key: 'money',
		width: 120
	},
	{
		title: '税额',
		dataIndex: 'texMoney',
		key: 'texMoney',
		width: 120
	},
	{
		title: '成本',
		dataIndex: 'cost',
		key: 'cost',
		width: 120
	},
	{
		title: '备注',
		dataIndex: 'remarks',
		key: 'remarks',
		width: 300
	},

	{
		title: '操作',
		dataIndex: 'action',
		key: 'action',
		width: 100,
		fixed: 'right',
	},
];


// 提交
const submit = () => {
	if (submitFormData.value.recordList.length <= 0) {
		message.error('请填写单据清单')
		return
	}
	// 动态表格校验
	console.log('提交结果：', submitFormData.value, recordForm)
	recordForm.value.validate().then(() => {
		formRef.value.validate().then(() => {
			// 业务员
			submitFormData.value.header.userIds = submitFormData.value.header.userIds[0]
			console.log('表单验证成功', submitFormData.value);

			submitFormData.value.header.billType = '采购订单'
			imsOrderApi.outWare(submitFormData.value).then(res => {
				console.log('入库：', res)
				// 提交逻辑
				message.success('提交成功')
				recordModal.value.resetData()
				if (!recordModal.value.isNext) {
					recordModal.value.visible = false
				}


				emit('successful')
			})


		}).catch(error => {
			console.log('表单验证失败2', error);
			return false
		})

	}).catch(error => {
		console.log('表单验证失败1', error);
		return false
	});
};



// 抛出函数
defineExpose({
	onOpen
})



</script>

<style scope>
.resize-handle {
	position: absolute;
	width: 10px;
	height: 10px;
	right: 0;
	bottom: 0;
	cursor: se-resize;
	background-color: #000;
}


.fullscreen-icon-wrapper {
	position: absolute;
	top: 16px;
	right: 70px; /* 调整位置，确保在关闭按钮旁边 */
}



.fullscreen-modal .ant-modal-content {
	height: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.fullscreen-modal .ant-modal-body {
	padding: 0 !important; /* 确保内容也没有内边距 */
}


.record-header {
	display: inline-block;
	width: 300px;
}

.modal-header-icon {
	color: rgba(51, 112, 255, 1);
	font-size: 11px;
	margin-right: 10px;
}

.modal-title {
	float: left;
	color: #595959;
}

.divider-footer {
	margin: 24px 0 16px 0;
}

.modal-text-button {
	color: rgba(51, 112, 255, 1);
}

.modal-text-button-group {
	height: 48px;
	line-height: 48px;
	text-align: center;
}

.divider-center {
	margin: 24px 0 16px 0;
}

.divider-top {
	margin: 24px 0 16px 0;
}

.modal-header-icon-color {
	color: #828282;
}

.modal-header-margin-right {
	margin-right: 20px;
}

.bill-detail-title {
	margin: 0;
	color: rgba(0, 0, 0, 0.88);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.5;
	word-wrap: break-word;
}

.bottom-title-info {
	width: 100%;
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 10px;
}
</style>
